<template>
	<div id="map-river">
    <div class="detail" v-show="showRiverLv">
			<p><span style="width:25%">名称：</span>{{river.name}}</p>
			<p><span style="width:25%">实时水位：</span>{{river.depth}}m</p>
			<p><span style="width:25%">站址：</span>{{river.address}}</p>
			<div class="charts" ref="river_charts"></div>
			<div class="chart-descr flex-wrap align-center">
					<i class="dot"></i>
					<p class="align-item mg-r-30">水位</p>
					<p>日期：{{river.uptime}}</p>
			</div>
			<div class="river-lv-button" @click="changeChart">历史水位 >></div>
		</div>
		<div class="river-lv-history" id="river-lv-history" v-show="!showRiverLv">
			<div class="page-wrap">
				<div class="flex-wrap space-between">
						<div class="rive-lv-history-title">历史水位表</div>
						<div class="page flex-wrap">
								<el-pagination
										v-show="totalRecord != 0"
										@current-change="currentChange"
										:current-page="currentPage"
										:page-count="pageCount"
										layout="slot">
										<span>当前为第{{currentPage}}页</span>
										<span>共{{pageCount}}页</span>
								</el-pagination>
								<el-pagination
										@current-change="currentChange"
										:current-page="currentPage"
										:page-count="pageCount"
										layout="total, slot">
										<span class="page-cursor" @click="jumpToPage(1)">首页</span>
								</el-pagination>
								<el-pagination
										@current-change="currentChange"
										:current-page="currentPage"
										:page-count="pageCount"
										layout="prev, next"
										prev-text="上一页"
										next-text="下一页">
								</el-pagination>
								<el-pagination
										@current-change="currentChange"
										:current-page="currentPage"
										:page-count="pageCount"
										layout="slot">
										<span class="page-cursor" @click="jumpToPage(pageSizes)">末页</span>
								</el-pagination>
						</div>
				</div>
				<div class="river-table">
					<el-table :data="riverList" border style="width: 100%"
							:row-style="tableBodyColor" :header-cell-style="tableHeaderColor">
						<el-table-column label="报警编号" prop="czbm" align="center"></el-table-column>
						<el-table-column label="积水深度" prop="depth" align="center"></el-table-column>
						<el-table-column label="上报时间" prop="uptime" align="center"></el-table-column>
					</el-table>
				</div>
				<div class="charts" ref="river_history_charts"></div>
				<div class="flex-wrap align-center history-date">
					<i class="dot"></i>
					<p class="align-item mg-r-30">水位</p>
					<el-date-picker popper-class="river-history-date" 
							label="日期" prop="time" value-format="yyyy-MM-dd" 
							v-model="curTime" type="date" placeholder="选择日期"
							@change="changeDate"></el-date-picker>
					<div class="">数据来源：{{river.SJTGNM}}</div>
					<div class="back-to-riverlv" @click="backToRiverLv">返回 >></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	import echarts from 'echarts'
  export default {
		props: {
			river: {
				type: Object,
				default () {
					return {}
				}
			},
			riverId: {
				type: String,
				default: ''
			}
		},
		data () {
			return {
				showRiverLv: true,
				currentPage: 1,
				totalRecord: 0,
				pageCount: 0,
				pageSizes: 0,
				curTime: new Date(),
				riverList: [], // 河道水位分页
				riverLine: [
					{name:'漫堤',level:3,yAxis:0,lineStyle:{color:'red'},label:{fontSize: 16 * RATIO, color: 'red'}},
					{name:'超保证',level:2,yAxis:0,lineStyle:{color:'orange'},label:{fontSize: 16 * RATIO, color: 'orange'}},
					{name:'超警戒',level:1,yAxis:0,lineStyle:{color:'yellow'},label:{fontSize: 16 * RATIO, color: 'yellow'}},
					{name:'正常',level:0,yAxis:0,lineStyle:{color:'white'},label:{fontSize: 16 * RATIO, color: 'white'}}
				],
			}
		},
		watch: {
			river: function (newVal) {
				const xAxis = newVal.depths.map(v => v.uptime)
				const yAxis = newVal.depths.map(v => v.depth)
				newVal.thresholds.forEach((v, i) => {
					if (this.riverLine[i].level === v.LEVLE) {
						this.riverLine[i].yAxis = +v.THRESHOLD
					}
				})
				// 河道水位详情
				this.riverChart('river_charts', xAxis, yAxis, this.riverLine)
			}
		},
		async created () {
			// 河道历史水位
			await this.getRiverHistory(this.curTime)
			// 河道历史水位分页
			await this.getRiverData(1, this.curTime)
		},
		methods: {
			// ele对应图标的ref
			// 河道水位图
			riverChart (ele, xData, yData, riverLine) {
				let myCharts = echarts.init(this.$refs[ele],'dark');
				myCharts.setOption({
					textStyle:{fontSize:20*RATIO},
					backgroundColor: 'transparent',
					tooltip: {
						trigger: 'axis',
						padding:10*RATIO,
						textStyle:{
							fontSize:20*RATIO
						}
					},
					calculable : true,
					xAxis: {
						type: 'category',
						offset: 5 * RATIO,
						axisTick: {show:false},
						axisLabel:{
							fontSize:15*RATIO,
							lineHeight:15*RATIO,
						},
						axisLine: {
							lineStyle:{
								width:1*RATIO
							}
						},
						data: xData
					},
					yAxis: {
						nameTextStyle:{
							lineHeight: 10 * RATIO,
							fontSize: 15 * RATIO
						},
						offset: 5 * RATIO,
						max: function (value) {
							return value.max
						},
						min: 0,
						boundaryGap: [1, 1],
						name:'水位 (m)',
						nameTextStyle: {
							padding: [0,0,5,0],
							fontSize: 12 * RATIO
						},
						type: 'value',
						axisLine: {
							show:true
						},
						axisTick: {show:true},
						axisLabel:{
							fontSize:15*RATIO
						},
						splitLine: {
							show: false
						},
						// splitLine:{
							// lineStyle:{
							// 	color: ['#eee'],
							// 	type: 'dotted',
							// 	width: 1*RATIO
							// }
						// },
						splitNumber: 5
					},
					series: [{
						symbol:'circle',
						symbolSize:10*RATIO,
						smooth:true,
						data: yData,
						type: 'line',
						itemStyle : {
							normal : {
								color:'#f08a36',
								lineStyle:{
									width:1*RATIO,
									color:'#0ac4ce'
								}
							}
						},
						markLine: {
							lineStyle:{
								width:2*RATIO,
								type: 'dotted'
							},
							label:{fontSize: 20 * RATIO},
							itemStyle:{
								normal:{
									label:{
										formatter: '{b}'
									}
								}
							},
							data: riverLine
						}
					}]
				},true)
			},
			changeChart (val) {
				this.showRiverLv = false
			},
			backToRiverLv (val) {
				this.showRiverLv = true
			},
			// 表格头样式
			tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
				return `border-color: rgba(2,212,222,1)
					color: rgba(2,212,222,1); text-align: center;`
			},
			// 表格body样式
			tableBodyColor () {
				return `background: rgba(12,54,105,1); border-color: rgba(1,217,226,1)
					color: rgba(1,217,226,1); text-align: center;`
			},
			// 获取河道分页数据
			getRiverData (pageNum = 1, time) {
				this.riverList = []
				this.$axios.riverPage({
					id: this.riverId,
					time,
					pageNo: pageNum,
					pageSize: 5
				}).then(v=>{
					if(v.resultCode==200){
						console.log('河道水位站数组::', v)
						this.riverList=v.data.list
						this.totalRecord = v.data.totalCount
						this.pageSizes = v.data.pageCount
						this.pageCount = Math.ceil(v.data.totalCount / 5)
						const xAxis = v.data.list.map(v => v.uptime)
						const yAxis = v.data.list.map(v => v.depth)
						this.riverChart('river_history_charts', xAxis, yAxis, this.riverLine)
					}
				})
			},
			// 获取河道水位历史详情
			getRiverHistory (time) {
				this.$axios.riverHistoryDetail({
					id: this.riverId,
					time
				}).then(v=>{
					if(v.resultCode==200){
						console.log('河道水位站历史详情::', v)
						const xAxis = v.data.depths.map(v => v.uptime)
						const yAxis = v.data.depths.map(v => v.depth)
						this.riverChart('river_history_charts', xAxis, yAxis, this.riverLine)
					}
				})
			},
			// 获取时间
			async getRiverLvTime (val) {
				this.curTime = val
				await this.getRiverHistory(val)
				await this.getRiverData(1, val)
			},
			// 分页
			currentChange (val) {
				this.currentPage = val
				this.getRiverData(val, this.curTime)
			},
			// 跳到首页或者末页
			jumpToPage (val) {
				if (this.totalRecord == 0) {
					return
				}
				this.currentPage = val
				this.getRiverData(val, this.curTime)
			},
			// 选择日期
			changeDate (val) {
				this.curTime = val
				this.getRiverData(this.currentPage, val)
			}
		}
  }
</script>

<style lang="less"  rel="stylesheet/less">
#map-river {

}
</style>
